<template>
  <div class="navbar">
    <nav
      class="nav"
      @click="click"
    >
      <label
        v-if="!data.loaded"
        class="nav__button"
        for="file"
        title="Upload"
        role="button"
      ><span class="fa fa-upload" /></label>
      <button
        v-if="data.cropped"
        type="button"
        class="nav__button"
        data-action="restore"
        title="Undo (Ctrl + Z)"
      >
        <span class="fa fa-undo" />
      </button>
      <button
        v-if="data.loaded && !data.cropping"
        type="button"
        class="nav__button nav__button--danger"
        data-action="remove"
        title="Delete (Delete)"
      >
        <span class="fa fa-trash" />
      </button>
      <button
        v-if="data.cropping"
        type="button"
        class="nav__button nav__button--danger"
        data-action="clear"
        title="Cancel (Esc)"
      >
        <span class="fa fa-ban" />
      </button>
      <button
        v-if="data.cropping"
        type="button"
        class="nav__button nav__button--success"
        data-action="crop"
        title="OK (Enter)"
      >
        <span class="fa fa-check" />
      </button>
      <a
        v-if="downloadable && data.loaded"
        class="nav__button nav__button--success"
        title="Download"
        :download="data.name"
        :href="data.url"
      ><span class="fa fa-download" /></a>
      <button @click="send">
        发消息
      </button>
      <input id="command" type="text"  v-model="command" placeholder="请输入指令">

      <!--      <a
        class="nav__button"
        href="https://github.com/fengyuanchen/photo-editor"
        title="View on GitHub"
      ><span class="fa fa-github" /></a>-->
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    data: {
      type: Object,
      default: () => ({}),
      command: Object,
      count: 0,
    },
  },
  data() {
    return {
      downloadable: typeof document.createElement('a').download !== 'undefined',
     // path: 'ws://localhost:8080/myWs',
       path: 'ws://192.168.0.21:8080/myWs',
      socket: '',
    };
  },
  mounted() {
    // 初始化
    this.init();
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;
  },

  methods: {
    load(){
      this.count += 2;
    },
    click({ target }) {
      const action = target.getAttribute('data-action') || target.parentElement.getAttribute('data-action');

      if (action) {
        this.$emit('change', action);
      }
    },
    init() {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket');
      } else {
        console.log('开始websocket连接');
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open() {
      console.log('socket连接成功');
      // 查看是否已经连接扫描仪
      const str = this.socket.send('scanimage -L');
      console.log(str);
    },
    error() {
      console.log('连接错误');
    },
    getMessage(msg) {
      console.log(msg.data);
    },
    send() {
      this.socket.send(this.command);
    },
    close() {
      console.log('socket已经关闭');
    },
  },
};

</script>

<style scoped>
.navbar {
  float: right;
}

.nav__button {
  background-color: transparent;
  border-width: 0;
  color: #fff;
  cursor: pointer;
  display: block;
  float: left;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;

  &:focus {
    outline: none;
  }

  &:hover {
    background-color: #0074d9;
    color: #fff;
  }
}

.nav--success:hover {
  background-color: #2ecc40;
}

.nav--danger:hover {
  background-color: #ff4136;
}
</style>
